<template>
  <div>
    <div class="flex">
      <div class="title">1、奖项</div>
      <el-button type="primary" size="small" @click="dialogVisible = true"
        >添加</el-button
      >
    </div>
    <div>
      <el-table :data="honorTagObj.one" style="width: 100%">
        <el-table-column prop="company" label="公司"> </el-table-column>
        <el-table-column prop="year" label="年份"> </el-table-column>
        <el-table-column prop="sno" label="专利申请号"> </el-table-column>
        <el-table-column prop="sno_name" label="申请号名称"> </el-table-column>
        <el-table-column label="奖项">
          <template slot-scope="scope">
            {{ scope.row.honor.name }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button class="btn1" size="mini" @click="upData(scope.row)"
              >编辑</el-button
            >
            <el-button class="btn2" size="mini" @click="deleteDialog(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex">
      <div class="title">2、优势企业</div>
    </div>
    <div>
      <el-checkbox-group v-model="checkList1" @change="qualifications($event, 2)">
        <el-checkbox v-for="item in honorType2" :label="item.name" :key="item.name"></el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="flex">
      <div class="title">3、资质</div>
    </div>
    <div>
      <el-checkbox-group v-model="checkList2" @change="qualifications($event, 3)">
        <el-checkbox v-for="item in honorType3" :label="item.name" :key="item.name"></el-checkbox>
      </el-checkbox-group>
    </div>

    <el-dialog
      title="添加奖项"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <el-form ref="form" :model="form" label-position="top">
          <el-form-item label="奖项">
            <el-select @change="change" v-model="type_id" placeholder="请选择奖项">
              <el-option
                v-for="item in honorType1"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年份">
            <el-input v-model="form.year"></el-input>
          </el-form-item>
          <el-form-item label="专利申请号">
            <el-input v-model="form.sno"></el-input>
          </el-form-item>
          <el-form-item label="申请号名称">
            <el-input v-model="form.sno_name"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑奖项"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible3"
      width="30%"
    >
      <div>
        <el-form ref="form" :model="form" label-position="top">
          <el-form-item label="奖项">
            <el-select @change="change" v-model="type_id" placeholder="请选择奖项">
              <el-option
                v-for="item in honorType1"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年份">
            <el-input v-model="form.year"></el-input>
          </el-form-item>
          <el-form-item label="专利申请号">
            <el-input v-model="form.sno"></el-input>
          </el-form-item>
          <el-form-item label="申请号名称">
            <el-input v-model="form.sno_name"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelUp">取 消</el-button>
        <el-button type="primary" @click="confirmUp">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="警告" :visible.sync="dialogVisible2" width="30%">
      <span>是否确认删除该奖项</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="del">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  honorImport
} from "@/api/newuser";
import {
  honorType,
  qualifications,
  honorDel,
  honorEdit,
  honorAdd,
  honorTag,
} from "@/api/configApi"
export default {
  data() {
    return {
      checkList1: [],
      checkList2: [],
      dialogVisible: false,
      action: `https://patent.shundeip.com/v1/common/file`,
      dialogVisible2: false,
      dialogVisible3: false,
      file: [],
      honor_id: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],

      honorType1: [],
      honorType2: [],
      honorType3: [],
      honorTagObj: {},
      form: {
        year: "",
        sno: "",
        sno_name: "",
      },
      type_id: "",
      honor_id: ''
    };
  },
  watch: {
    company_id: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal, "newVal, oldVal");
        this.honorTag();
        this.honorType(1);
        this.honorType(2);
        this.honorType(3);
      },
      deep: true,
    },
  },
  filters: {},
  props: {
    company_id: {
      type: String,
      default: () => "",
    },
  },
  components: {},
  mounted() {},
  methods: {
    upload_success(file, fileList) {
      console.log(fileList,file);
      honorImport({
        file: file.data.url
      }).then(res => {
        console.log(res,'导入奖项');
        this.honorTag();
      })
    },
    upData(data) {
      console.log(data);
      this.form.year = data.year;
      this.form.sno = data.sno;
      this.form.sno_name = data.sno_name;
      this.type_id = data.honor.id;
      this.honor_id = data.id
      this.dialogVisible3 = true;
    },
    cancelUp() {
      this.form = {
        year: "",
        sno: "",
        sno_name: "",
      };
      this.type_id = "";
      this.dialogVisible3 = false;
    },
    confirmUp() {
      honorEdit({
        honor_id: this.honor_id,
        company_id: this.company_id,
        type: 1,
        type_id: this.type_id,
        year: this.form.year,
        sno: this.form.sno,
        sno_name: this.form.sno_name,
      }).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.honorTag();
        this.cancelUp();
      });
    },
    deleteDialog(id) {
      this.honor_id = id;
      this.dialogVisible2 = true;
    },
    del() {
      honorDel({
        honor_id: this.honor_id,
      }).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.honorTag();
        this.dialogVisible2 = false;
      });
    },
    change(val) {
      console.log(val, this.type_id);
    },
    cancel() {
      this.dialogVisible = false;
      this.form = {
        year: "",
        sno: "",
        sno_name: "",
      };
      this.type_id = "";
    },
    confirm() {
      honorAdd({
        company_id: this.company_id,
        type: 1,
        type_id: this.type_id,
        year: this.form.year,
        sno: this.form.sno,
        sno_name: this.form.sno_name,
      }).then((res) => {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.cancel();
        this.honorTag();
      });
    },
    qualifications(value, index) {
      console.log(value);
      let id = "";
      let id_adv = "";
      this.checkList1.map((res) => {
        this.honorType2.map((res_) => {
          if (res_.name == res) {
            if (id) {
              id = id + "," + res_.id;
            } else {
              id += res_.id;
            }
          }
        });
      });
      this.checkList2.map((res) => {
        this.honorType3.map((res_) => {
          if (res_.name == res) {
            if (id_adv) {
              id_adv = id_adv + "," + res_.id;
            } else {
              id_adv += res_.id;
            }
          }
        });
      });
      qualifications({
        company_id: this.company_id,
        adv_label: id,
        label: id_adv,
      });
    }, 
    honorTag() {
      honorTag({
        company_id: this.company_id,
      }).then((res) => {
        console.log(res, "我的资质信息");
        this.honorTagObj = res; 

        this.checkList1 = res.two.map((res) => {
          return res.name;
        });
        this.checkList2 = res.three.map((res) => {
          return res.name;
        });
      });
    },
    honorType(type) {
      honorType({
        type: type,
        region_id: this.$store.state.user.region_id
      }).then((res) => {
        this["honorType" + type] = res;
        console.log(this["honorType" + type], type);
      });
    },
  },
};
</script>

<style scoped lang="less">
// .el-upload-list {
//   display: none;
// }
.upload-demo {
  margin-left: 5px;
}
.btn1 {
  background-color: #409eff !important;
  color: #fff !important;
}
.btn2 {
  background-color: #f56c6c !important;
  color: #fff !important;
}
.el-select {
  width: 100%;
}
.el-checkbox {
  margin-bottom: 10px;
}
.flex {
  padding: 20px 0 10px 0;
}
.title {
  font-size: 24px;
  margin-right: 10px;
}

@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}

@media (max-width: 768px) {
}
</style>
